<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/toastr.min.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/toastr.min.js"></script>
    <title>用户注册</title>

</head>
<body>
<jsp:include page="/WEB-INF/common/nav.jsp" />
<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form action="${pageContext.request.contextPath}/user/next" id="myform" method="post" autocomplete="off">
                    <input type="hidden" name="uid" value="${requestScope.uid}">
                    <p class="file">
                        <input type="file" name="resource" @change="uploadPhoto" />
                        <span class="t1" v-if="!isUpload">点击上传用户头像、图片小于5MB</span>
                        <!-- 上传后的效果 -->
                        <span class="t2" v-if="isUpload">
                            <img v-bind:src="imgSrc" />
                            <b v-text="imgName"></b>
                            <a>重新上传</a>
                        </span>
                        <input type="hidden" name="photo" :value="photo"/>
                    </p>

                    <p>
                        <label>出生日期：</label>
                        <input id="tel" class="upt" type="date" name="birth" v-model.trim="birth" />
                    </p>

                    <p>
                        <label>昵称：</label>
                        <input id="nickname" class="upt" type="text" name="nickName" v-model.trim="nickName" />
                        <b></b>
                    </p>

                    <p>
                        <label>真实姓名：</label>
                        <input id="realname" class="upt" type="text" name="realName" v-model.trim="realName" />
                        <b></b>
                    </p>

                    <p>
                        <label>性别：</label>
                        <select name="sex" class="upt">
                            <option value="s">保密</option>
                            <option value="m">男</option>
                            <option value="f">女</option>
                        </select>
                    </p>

                    <p>
                        <a class="btn" @click="handlerNext">确认完成</a>
                        <a class="skip" href="${pageContext.request.contextPath}/user/success">跳过该步骤</a>
                    </p>
                </form>
            </div>
        </section>
    </div>
</article>
<jsp:include page="/WEB-INF/common/footer.jsp" />


<script src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>
<script>
    new Vue({
        el: "#main" ,
        data: {
            isUpload: false,
            imgSrc: '',
            imgName: '' ,
            photo: '',
            birth: '',
            nickName: '',
            realName: '',
        },
        methods: {
            uploadPhoto(event) {
                // 获取选中的用户头像
                let file = event.target.files[0];
                this.imgName = file.name ;
                // 预览头像
                let fr = new FileReader();
                fr.readAsDataURL(file) ;
                // 监听图片是否图读完成
                fr.onload = () => {
                    // 获取读取的结果， 并作为图片的路径
                    this.imgSrc =  fr.result ;
                    this.isUpload = true ;
                }
                // 发送异步请求
                axios.postForm("${pageContext.request.contextPath}/user/upload", {photo: file}).then(res=> {
                    if (res.data.status === "1000") {
                       this.photo = res.data.data ;
                    }
                })
            },
            handlerNext() {
                // 获取要提交的 form表单
                document.querySelector("#myform").submit();
            }
        }
    })

</script>
</body>

</html>
